<template>
	<view>
		<view class="header">
			<u-navbar :title="title" back-icon-size='44' :background="background" title-color="#FFFFFF"
				:border-bottom='false' back-icon-color='#071D42'></u-navbar>
		</view>
		<view class="main">
			<view class="info-box">
				<view class="tips">
					请确保乘车区段与学生证上的优惠区间保存一致，否则无法 取票，目前仅支持大学生购买线上学生票
				</view>
				<view class="edit-li">
					<view class="label">
						乘客类型
					</view>
					<view class="right">
						<u-checkbox-group size='28'>
							<u-checkbox v-model="item.checked"
								v-for="(item, index) in checkList" :key="index" shape="circle" :name="item.name">{{item.name}}
							</u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
				<view class="edit-li">
					<view class="label">
						姓名
					</view>
					<view class="right">
						<input type="text" placeholder="请输入姓名" />
					</view>
				</view>
				<view class="edit-li">
					<view class="label">
						证件类型
					</view>
					<view class="right" style='display: flex;align-items: center;justify-content: space-between;'>
						<input type="text" placeholder="请选择" />
						<u-icon name="arrow-right" color="#999999" size="28" @click="showPop=true"></u-icon>
					</view>
				</view>
				<view class="edit-li">
					<view class="label">
						证件号码
					</view>
					<view class="right">
						<input type="text" placeholder="请输入证件号码" />
					</view>
				</view>
				<view class="edit-li">
					<view class="label">
						手机号码
					</view>
					<view class="right">
						<input type="text" placeholder="请输入手机号码" />
					</view>
				</view>
			</view>
			<view class="qdBtn">
				确定
			</view>
			<view class="tipText">
				* 请认真核对信息并确认无误,否则将出现购票失败,无法乘车等情况
			</view>
			
			<view class="stuText">
				<view class="label">
					学生票购票说明
				</view>
				<view class="p">
					• 仅支持购买硬座/二等座/无座，其他座席需购买成人票
				</view>
				<view class="p">
					• 学生优惠每年可用4次;超出4次或乘车区段不在优惠区间将无法 取票
				</view>
				<view class="p">
					• 取票时，需携带本人学生证
				</view>
			</view>
			
		</view>
		
		<u-popup v-model="showPop" mode="bottom" closeable border-radius="16">
			<view class="certBox">
				<view class="title">
					选择证件类型
				</view>
				<view class="type-ul">
					<view class="type-li">
						二代身份证
					</view>
					<view class="type-li">
						护照
					</view>
					<view class="type-li">
						台胞证
					</view>
					<view class="type-li">
						回乡证
					</view>
					<view class="type-li">
						外国人永久居留身份证
					</view>
					<view class="type-li">
						港澳台居民身份证
					</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPop:false,
				title: '新增乘客',
				type: 1, // 1 添加 2编辑
				background: {
					backgroundColor: 'rgba(0,0,0,0)'
				},
				checkList: [{
						name: '成人票',
						checked: false,
					},
					{
						name: '学生票',
						checked: false,
					},
					{
						name: '儿童票',
						checked: false,
					}
				]
			}
		},
		onLoad(option) {
			this.type = option.type
			if (this.type == 1) {
				this.title = '新增乘客'
			}
			if (this.type == 2) {
				this.title = '编辑乘客'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 256rpx;
		background: linear-gradient(180deg, #3DA4FE 0%, #3587F7 64%, rgba(45, 123, 247, 0) 100%);
	}

	.main {
		margin-top: -144rpx;

		.info-box {
			margin: 0 auto;
			width: 694rpx;
			height: 628rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 28rpx 20rpx 0;

			.tips {
				width: 654rpx;
				height: 100rpx;
				background: #FEF7EF;
				border-radius: 8rpx;
				font-size: 24rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #F57426;
				margin: 0 auto;
				padding: 12rpx;
			}

			.edit-li {
				width: 100%;
				height: 100rpx;
				border-bottom: 2rpx solid #F2F2F7;
				display: flex;
				align-items: center;

				&:last-child {
					border-bottom: none
				}

				.label {
					width: 24%;
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #666666;
				}

				.right {
					width: 76%;
					input{
						font-size: 28rpx;
						font-family: Segoe UI;
					}
				}
			}
		}
		
		.qdBtn {
			width: 654rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #3FA3F9 0%, #2D7BF7 100%);
			border-radius: 8rpx;
			margin: 28rpx auto 0;
			font-size: 32rpx;
			font-family: Segoe UI;
			font-weight: 400;
			line-height: 88rpx;
			color: #FFFFFF;
			text-align: center;
		}
		
		.tipText {
			margin-top: 20rpx;
			width: 100%;
			text-align: center;
			font-size: 24rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #FB4F4B;
			margin-bottom: 38rpx;
		}
	
		.stuText {
			width: 694rpx;
			height: 282rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin: 0 auto;
			padding: 0 20rpx;
			.label {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				font-size: 32rpx;
				font-family: Segoe UI;
				font-weight: bold;
				color: #333333;
			}
			.p {
				font-size: 24rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #999999;
				margin: 10rpx 0;
			}
		}
	}
	
	.certBox {
		padding-top: 10rpx;
	
		.title {
			width: 100%;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			border-bottom: 2rpx solid #F2F2F2;
		}
	
		.type-ul {
			padding: 0 28rpx;
	
			.type-li {
				width: 100%;
				height: 88rpx;
				border-bottom: 2rpx solid #F2F2F2;
				text-align: center;
				line-height: 88rpx;
			}
		}
	}
</style>
